<template>
  <div :style="{ width: props.width, height: props.height }">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      :width="props.width"
      :height="props.height"
      viewBox="0 0 65.387 72.63"
    >
      <defs>
        <filter
          id="路径_28"
          x="0"
          y="0"
          width="65.387"
          height="72.63"
          filterUnits="userSpaceOnUse"
        >
          <feOffset input="SourceAlpha" />
          <feGaussianBlur stdDeviation="2" result="blur" />
          <feFlood flood-color="#51b1dd" />
          <feComposite operator="in" in2="blur" />
          <feComposite in="SourceGraphic" />
        </filter>
      </defs>
      <g id="装饰1" transform="translate(7 6.577)">
        <g id="BG">
          <g id="路径_28-2" data-name="路径 28">
            <path
              id="路径_28-3"
              data-name="路径 28"
              d="M27.314.87a3,3,0,0,0-3-.006L1.5,13.981a3,3,0,0,0-1.5,2.6v25.56A3,3,0,0,0,1.442,44.7L24.249,58.566a3,3,0,0,0,3.127-.007l22.58-13.853a3,3,0,0,0,1.431-2.557V16.573a3,3,0,0,0-1.494-2.594Z"
              fill="none"
            />
            <g transform="matrix(1, 0, 0, 1, -7, -6.58)" filter="url(#路径_28)">
              <path
                id="路径_28-4"
                data-name="路径 28"
                d="M27.314.87a3,3,0,0,0-3-.006L1.5,13.981a3,3,0,0,0-1.5,2.6v25.56A3,3,0,0,0,1.442,44.7L24.249,58.566a3,3,0,0,0,3.127-.007l22.58-13.853a3,3,0,0,0,1.431-2.557V16.573a3,3,0,0,0-1.494-2.594Z"
                transform="translate(7 6.58)"
                fill="none"
                :stroke="states.color"
                stroke-miterlimit="10"
                stroke-width="2"
              />
            </g>
          </g>
          <path
            id="路径_28-5"
            data-name="路径 28"
            d="M23.089.561a2,2,0,0,0-1.973,0L1.017,11.9A2,2,0,0,0,0,13.64V35.684A2,2,0,0,0,.976,37.4l20.1,11.985a2,2,0,0,0,2.056,0l19.9-11.98A2,2,0,0,0,44,35.689V13.634A2,2,0,0,0,42.99,11.9Z"
            transform="translate(3.693 4.759)"
            fill="rgba(28,75,77,0.5)"
            :stroke="states.color2"
            stroke-miterlimit="10"
            stroke-width="1"
          />
          <rect
            id="矩形"
            width="4"
            height="12"
            rx="1"
            transform="translate(49.343 23.972)"
            :fill="states.color"
          />
          <rect
            id="矩形备份_18"
            data-name="矩形备份 18"
            width="4"
            height="12"
            rx="1"
            transform="translate(6.054 50.165) rotate(-60)"
            :fill="states.color"
          />
        </g>
      </g>
    </svg>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";

let props = defineProps({
  width: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "",
  },
  models: {
    type: Object,
    default: () => ({}),
  },
});
const states = computed({
  get: () => props.models,
  set: () => {},
}) as any;
</script>

<style scoped lang="scss"></style>
